<template>
  <div class="index">
    <el-image style="width: 100%; height: 240px" :src="require('@/assets/paoche.jpg')" :fit="none"></el-image>
    <div class="personal-center">
      <div class="user-box">
        <div class="portrait"><img :src="require('@/assets/car1.png')" alt=""></div>
        <div class="name">陈道明</div>
        <div class="id">ID:12345678</div>
        <div class="change-password" @click="centerDialogVisible = true">修改密码</div>
        <hr class="line" />
        <div class="router-link-box">
          <div :class="['link', item.active ? 'active' : '']" v-for="(item, index) in link" :key="index" @click="routePush(item.route)">{{item.name}} <i class="el-icon-arrow-right"></i></div>
        </div>
      </div>
      <router-view class="router-box"></router-view>
    </div>
     <el-dialog title="修改密码" :visible.sync="centerDialogVisible" width="30%" center>
      <div class="choice-box">
        <el-input size="mini" placeholder="请输入旧密码" prefix-icon="el-icon-search" v-model="search"></el-input>
        <el-input size="mini" placeholder="请输入新密码" prefix-icon="el-icon-search" v-model="sp"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false" class="sure">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
      centerDialogVisible: false,
      url:
        'http://image.baidu.com/search/detail?ct=503316480&z=9&ipn=d&word=%E6%B3%95%E6%8B%89%E5%88%A9%E8%B6%85%E5%AE%BD%E5%9B%BE%E7%89%87&step_word=&hs=2&pn=1&spn=0&di=14520&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3640629229%2C2987802467&os=1068196936%2C185468614&simid=4163042804%2C675804341&adpicid=0&lpn=0&ln=1372&fr=&fmq=1589794824043_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=0&height=0&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=http%3A%2F%2Fimg.mp.sohu.com%2Fupload%2F20180228%2F00c323cdcd8347fd993f63549b3d77f2_th.jpg&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bxtvt_z%26e3BgjpAzdH3FtvijAzdH3F1jpwts-b9dal9_z%26e3Bip4s&gsm=2&rpstart=0&rpnum=0&islist=&querylist=&force=undefined',
      link: [
        { name: '个人信息', route: '/personalInformation', active: true },
        { name: '消息中心', route: '/messageCenter', active: false },
        { name: '我的课程', route: '/myCourse', active: false },
        { name: '我的项目', route: '/myProject', active: false },
        { name: '我的赛事', route: '/myGame', active: false },
        { name: '我的活动', route: '/myActivities', active: false },
        { name: '我的收藏', route: '/myCollection', active: false },
        { name: '个人成长', route: '/personalGrowth', active: false }
      ]
    }
  },
  created () {
    this.getRouter()
  },
  watch: {
    '$route.path' () {
      this.getRouter()
    }
  },
  methods: {
    getRouter () {
      this.link.forEach(item => {
        if (item.route === this.$route.path) {
          item.active = true
        } else {
          item.active = false
        }
      })
    },
    routePush (path) {
      this.$router.push({ path })
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
   /deep/.el-dialog__wrapper {
    .el-dialog {
      margin-top: 40vh !important;
      background: #fff;
      border-radius: 8px;
      width: 25% !important;
      .el-dialog__header {
        .el-dialog__title {
          font-size: 22px;
          color: rgba(6, 17, 37, 1);
          font-weight: 600;
        }
      }
      .el-dialog__body {
        padding-bottom: 0px;
        .choice-box {
          padding: 0 34px;
          /deep/ .el-input {
            width: 277px;
            margin-bottom: 18px;
            /deep/ .el-input__inner {
              border-radius: 8px;
              height: 38px;
              font-size: 16px;
              line-height: 21px;
            }
          }
          /deep/ .el-icon-search {
            line-height: 21px;
            font-size: 16px;
          }
        }
      }
      .sure{
         padding: 12px 122px;
        background: linear-gradient(
          135deg,
          rgba(91, 192, 251, 1) 0%,
          rgba(46, 141, 246, 1) 100%
        );
      }
      // /deep/.el-button--primary {
      //   padding: 12px 122px;
      //   background: linear-gradient(
      //     135deg,
      //     rgba(91, 192, 251, 1) 0%,
      //     rgba(46, 141, 246, 1) 100%
      //   );
      // }
    }
  }
  .header-img {
    width: 100%;
    height: 240px;
  }
  .personal-center {
    width: 1200px;
    margin: 32px auto 72px;
    display: flex;
    justify-content: space-around;
    .user-box {
      width: 200px;
      height: 610px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
      text-align: center;
      .portrait {
        margin: 27px 0 33px;
        img {
          width: 120px;
          height: 120px;
          border-radius: 50%;
        }
      }
      .name {
        font-size: 18px;
        color: rgba(19, 35, 64, 1);
      }
      .id {
        margin-top: 8px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(51, 69, 102, 1);
      }
      .change-password {
        margin-top: 16px;
        font-size: 12px;
        font-weight: 400;
        color: rgba(104, 115, 136, 1);
      }
      .line {
        margin: 24px 0 17px;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 1);
        opacity: 0.05;
      }
    }
    .router-link-box {
      .link {
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(51, 69, 102, 1);
        height: 35px;
        background: rgba(46, 141, 246, 0);
        transition: all 0.3s;
        &:hover {
          color: rgba(46, 141, 246, 1);
        }
        &.active,
        &:hover.active {
          color: rgba(255, 255, 255, 1);
          background: rgba(46, 141, 246, 1);
        }
      }
    }
    .router-box {
      width: 976px;
      height: 610px;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px;
    }
  }
}
</style>
